// 首页pc端的样式表
body {
  width: 100%;
  min-width: 1200px;
  background-color: #fdf9f0;

  // 浮动的标题头
  header {
    width: 100%;
    // min-width: 1200px;
    height: 49.6px;
    line-height: 49.6px;
    background-color: #262626;
    color: #fff;
    & img {
      vertical-align: middle;
    }
    & span {
      text-align: center;
      display: inline-block;
      width: 50px;
      height: 100%;
      font-size: 12px;
    }
    .header-contain {
      width: 1200px;
      margin: 0 auto;
    }
  }

  // 开头导航栏
  nav {
    // min-width: 1200px;
    width: 100%;
    height: 100px;
    line-height: 100px;
    position: relative;
    // margin: 0 auto;
    & > a {
      position: absolute;
      left: 30px;
      top: 50%;
      transform: translateY(-50%);
      display: block;
      width: 147px;
      height: 71px;
      img {
        width: 100%;
        height: 100%;
        // vertical-align: middle;
      }
    }
    .nav-contain {
      width: 1200px;
      margin: 0 auto;
      position: relative;
      a.logo {
        position: absolute;
        left: 15px;
        top: 10px;
      }
    }
    .nav-ul {
      margin-left: 200px;
      ul {
        li {
          float: left;
          margin: 0 30px;
          a {
            // display: block;
            text-decoration: none;
            font-size: 20px;
            font-weight: 500;
            color: #000;
            &:hover {
              // text-decoration: #ccc;
              padding-bottom: 5px;
              border-bottom: 2px solid #666;
            }
          }
        }
      }
      & > .input {
        position: relative;
        input {
          // display: block;
          width: 250px;
          height: 40px;
          border-radius: 20px;
          border: 1px solid #d5ac95;
          padding-left: 15px;
          font-size: 15px;
          background-color: #fdf9f0;
          outline: none;
        }
        & > span {
          position: absolute;
          right: 14px;
          top: 5px;
        }
      }
    }
  }

  // 头部展示图片
  & > .visit {
    width: 100%;
    height: 110px;
    img {
      width: 100%;
      height: 110px;
    }
  }

  & > .main-contain {
    .xs-main-contain {
      margin: 0 auto;
      width: 1200px;
      background-color: #fffdf9;
      .main-contain-head {
        margin: 0 45px;
        // height: 350px;
        padding-top: 45px;

        // width: 1110px;
        .banner {
          margin-bottom: 30px;
          .banner-inner {
            width: 700px;
            height: 340px;
            overflow: hidden;
            position: relative;
            ul {
              width: 300%;
              position: absolute;
              left: 0;
              top: 0;
              li {
                float: left;
                img {
                  width: 700px;
                  height: 300px;
                }
              }
            }
            .square {
              position: absolute;
              height: 10px;
              margin: 320px auto 20px;
              left: 50%;
              transform: translateX(-50%);
              bottom: -10px;
              span {
                display: inline-block;
                height: 8px;
                width: 8px;
                border-radius: 50%;
                border: 1px solid #ba7758;
                margin: 0 5px;
              }
              .current {
                background-color: #ba7758;
              }
            }
          }
        }
        .tougao {
          padding-left: 40px;
        }
      }
      .main-contain-body {
        margin: 0 45px;
        .main-contain-body-1 {
          margin-top: 20px;
          .xsrt {
            margin-left: 30px;
            position: relative;
            margin-bottom: 20px;
            column-span: all;
            span {
              position: absolute;
              display: inline-block;
              width: 26px;
              height: 26px;
              left: -30px;
              top: 0;
              background: url(./img/ic_catalogue.png) no-repeat;
            }
            h1 {
              font-size: 20px;
              font-weight: 400;
            }
          }
          .zxwd {
            .news-list {
              ul {
                &:nth-child(2) {
                  li {
                    text-align: right;
                  }
                }
                li {
                  width: 200px;
                }
              }
            }
          }
        }
        .main-contain-body-2 {
          &.gsdq {
            margin: 20px 0;
          }
        }
        .main-contian-body-3 {
          .col3-l {
            // position: relative;
            h1 {
              display: inline-block;
              margin-right: 50px;
            }
          }
          .col3-c {
            padding-left: 50px;
          }
          .col3-r {
            padding-left: 50px;
          }
        }
        .main-contain-body-4 {
          .col3-c {
            padding-left: 50px;
          }
          .col3-r {
            padding-left: 50px;
          }
        }
        .main-contain-body-6 {
          .title {
            margin-top: 20px;
            h1 {
              border-left: 0;
              padding: 0;
            }
          }
          .friend-link {
            a {
              display: inline-block;
              text-decoration: none;
              font-size: 15px;
              color: #000;
              margin: 10px 20px 10px 0;
            }
          }
        }
      }
    }
  }

  // 底部footer区域
  footer {
    background: url(./img/bottom_bg.png) no-repeat;
    text-align: center;
    color: #000;
    font-size: 15px;
    padding: 30px 0;
    p {
      margin: 10px 0;
    }
    a {
      text-decoration: none;
      color: #000;
      margin: 10px 0;
    }
    ul,
    ol {
      li {
        display: inline-block;
        margin: 10px 0;
      }
    }
  }
}

// 首页功能样式表
// 当鼠标滚动。定位变成变成fixed
.fixed-header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
}

// 做个容器，然后左右布局，复用
.col2 {
  // background-color: #f00;
  width: 1100px;
  // height: 385px;
  border-bottom: 1px solid #d5a23c;
  box-sizing: border-box;
  .col2-l {
    // background-color: #0f0;
    width: 750px;
    // height: 360px;
    float: left;
    box-sizing: border-box;
    border-right: 1px dotted #d5a23c;
  }
  .col2-r {
    // background-color: #00f;
    width: 350px;
    // height: 380px;
    float: left;
    box-sizing: border-box;
    padding-left: 45px;
  }
}

.col3 {
  margin-top: 25px;
  width: 1100px;
  border-bottom: 1px solid #d5a23c;
  box-sizing: border-box;
  .col3-l {
    width: 530px;
    float: left;
    box-sizing: border-box;
    border-right: 1px dotted #d5a23c;
    // height: 100px;
  }
  .col3-c {
    width: 380px;
    float: left;
    box-sizing: border-box;
    border-right: 1px dotted #d5a23c;
    // height: 100px;
  }
  .col3-r {
    width: 190px;
    float: left;
    box-sizing: border-box;
    // height: 100px;
  }
}

.title {
  color: #f71b18;
  font-size: 15px;
  font-weight: 500;
}

.label {
  color: #d5a23c !important;
}
.label::before {
  content: "[";
}
.label::after {
  content: "]";
}

.h1 {
  border-left: 5px solid #f71b18;
  padding-left: 10px;
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 400;
}

// column:2
.news-list {
  column-count: 2;
  column-gap: 20px;
  font-size: 14px;
  white-space: nowrap;
  word-break: break-all;
  color: #000;
  // margin-bottom: 15px;
  ul {
    li {
      // margin: 15px 0;
      padding: 10px 0;
      height: 15px;
      line-height: 15px;
      overflow: hidden;
      a {
        text-decoration: none;
        color: #000;
        &:hover {
          // text-decoration: #262626;
          border-bottom: 1px solid #000;
        }
      }
    }
  }
}
// column:3
.news-list-3 {
  column-count: 3;
}
// column:4
.news-list-4 {
  column-count: 4;
}

.mb {
  margin-bottom: 20px;
}

.badge {
  background-color: #eac678;
  text-align: center;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  margin-right: 15px;
}
